<template>
  <div class="main-experience" :style="[$parent.getTitleDirStyle, getModBottom]">
    <RTitle :title-color="getModColor" icon="work" :isShow="getSettingStatus('title')"
            :isFixed="$parent.getTitleDir==='row'" v-model="title"/>
    <div class="experience">
      <div class="item-column" v-for="(items, index) in getLineItems" :key="index">
        <div class="line-item" :style="{width: `${100 / settings.rows}%`}" v-for="(item, innerIndex) in items"
             :key="innerIndex">
          <div v-if="item!==null" class="item-content">
            <div class="content-op" v-if="dataLs.length>1">
              <img alt="上移" @click="onUp(index, innerIndex)"
                   :src="getContentOp('up', index, innerIndex)"/>
              <img alt="下移" @click="onDown(index, innerIndex)"
                   :src="getContentOp('down', index, innerIndex)"/>
              <img alt="删除" @click="onDel(index, innerIndex)" src="@/assets/resume/experience/delete.svg"/>
            </div>
            <div class="item-top">
              <div v-show="getSettingStatus('logo')" class="item-logo">logo</div>
              <div class="item-brief brief-normal" v-if="settings.rows===1">
                <div>
                  <span>{{item.time}}</span>
                  <RInput v-model="item.call" font-weight="bold" hint="填写职位名称"></RInput>
                </div>
                <RInput :align="settings.rows===1?'right':null" v-model="item.company" hint="填写公司名字"></RInput>
              </div>
              <div class="item-brief" v-else>
                <RInput v-model="item.time" font-weight="bold" hint="设置时间"></RInput>
                <RInput v-model="item.company" font-weight="bold" hint="填写公司名字"></RInput>
                <RInput v-model="item.call" hint="填写职位名称"></RInput>
              </div>
            </div>
            <RInput v-model="item.content" :lis-val="settings.rows"
                    hint="详细描述你的职责范围、工作任务及取得的成绩，工作经验的时间采取倒叙形式，最近经历写在前面，描述尽量具体简洁，工作经验的描述与目标岗位的招聘要求尽量匹配，用词精准。"></RInput>
          </div>
          <div v-else></div>
        </div>
      </div>
    </div>

    <!--操作-->
    <ROperator :operators="['drag', 'add', 'skin', 'setting']" @add="onAdd" @setting="onChangeSetting"
               @skin="onChangeSkin" @drag="onDrag($event)"/>
    <!--换版-->
    <div class="experience-skin" v-show="changeSkin" @mouseleave="onChangeSkin">
      <div class="skin-item" :class="{'skin-checked': settings.rows===row}" @click="doChangeSkin(row)"
           v-for="(row, index) in [1, 2, 3]" :key="index">
        <img :style="{width: `calc(${100 / row}% - 5px)`}" src="@/assets/resume/format.png"
             v-for="num in getImgNumRange (row)" :key="num"/>
      </div>
    </div>
    <!--设置-->
    <div v-show="changeSetting" @mouseleave="onChangeSetting">
      <RSetting v-model="settings.switchLs"></RSetting>
    </div>
  </div>
</template>

<script>
import RTitle from '../base/RTitle'
import RInput from '../base/RInput'
import ROperator from '../base/ROperator'
import mixin from '../../store/mixin'
import RSetting from '../base/RSetting'

export default {
  name: 'Experience',
  components: {RTitle, RInput, ROperator, RSetting},
  mixins: [mixin],
  data () {
    return {
      changeSetting: false,
      changeSkin: false
    }
  },
  props: ['compId'],
  methods: {
    onAdd () {
      this.dataLs.push({
        time: 2002,
        call: '',
        company: ''
      })
    },
    onChangeSetting () {
      this.changeSetting = !this.changeSetting
    },
    onChangeSkin () {
      this.changeSkin = !this.changeSkin
    },
    doChangeSkin (row) {
      this.settings.rows = row
    },
    getImgNumRange (row) {
      let arr = []
      for (let i = 0; i < row; i++) {
        arr.push(i)
      }
      return arr
    },
    onUp (index, innerIndex) {
      this.swapData(index, innerIndex, -1)
    },
    onDown (index, innerIndex) {
      this.swapData(index, innerIndex, 1)
    },
    onDel (index, innerIndex) {
      let itemIndex = index * this.settings.rows + innerIndex
      this.dataLs.splice(itemIndex, 1)
    },
    swapData (index, innerIndex, dir) {
      let itemIndex = index * this.settings.rows + innerIndex
      let itemIndex2 = itemIndex + dir
      if (itemIndex2 >= 0 && itemIndex2 < this.dataLs.length) {
        let tempOption = this.dataLs[itemIndex2]
        this.$set(this.dataLs, itemIndex2, this.dataLs[itemIndex])
        this.$set(this.dataLs, itemIndex, tempOption)
      }
    },
    getContentOp (type, index, innerIndex) {
      let itemIndex = index * this.settings.rows + innerIndex
      let isOff = (type === 'up' && itemIndex === 0) || (type === 'down' && itemIndex === this.dataLs.length - 1)
      return require(`@/assets/resume/experience/${type}${isOff ? '' : '_on'}.svg`)
    }
  },
  computed: {
    getLineItems () {
      return ((data, rows) => {
        if (rows === 1) {
          return data.map(x => [x])
        }
        let index = 0
        let newArray = []
        while (index < data.length) {
          newArray.push(data.slice(index, index += rows))
        }
        // 为了能够分割均衡
        let lastArr = newArray[newArray.length - 1]
        for (let i = 0; i < lastArr.length % rows; i++) {
          lastArr.push(null)
        }
        newArray[newArray.length - 1] = lastArr
        return newArray
      })(this.dataLs, this.settings.rows)
    }
  }
}
</script>

<style scoped lang="less">
  .main-experience {
    width: 100%;

    .experience {
      width: 100%;
    }

    .item-column {
      display: flex;
      flex-direction: row;
      justify-content: start;
      width: 100%;

      .line-item {
        padding: 0 4px 4px 4px;

        .item-content {
          position: relative;

          &:hover {
            background: rgba(135, 206, 250, 0.3);

            .content-op {
              display: block;
            }
          }

          .content-op {
            position: absolute;
            left: -22px;
            top: 0;
            background: white;
            width: 15px;
            padding: 2px 2px;
            border: whitesmoke 1px solid;
            box-shadow: -5px 5px 5px whitesmoke;
            display: none;

            > * {
              width: 15px;
              cursor: pointer;
            }
          }
        }

        &:not(:last-child) {
          border-right: 1px dashed lightgrey;
        }

        .item-top {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .item-logo {
            width: 50px;
            height: 50px
          }

          .item-brief {
            flex: 1;
          }

          .brief-normal {
            display: flex;
            justify-content: space-between
          }
        }
      }
    }

    .experience-skin {
      position: absolute;
      right: 0;
      top: 30px;
      width: 248px;
      padding: 10px 15px 0 15px;
      border: whitesmoke 1px solid;
      box-shadow: 10px 10px 10px whitesmoke;
      z-index: 3;
      background: white;

      .skin-checked {
        border: 1px solid lightskyblue;

        &:after {
          content: "";
          background: url("../../assets/resume/checked.svg");
          background-size: contain;
          width: 30px;
          height: 27px;
          position: absolute;
          right: 0;
          top: 0;
        }
      }

      > * {
        width: 228px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        padding: 9px;
        border: 1px solid whitesmoke;
        position: relative;
        cursor: pointer;
      }

      &:before {
        content: "";
        display: block;
        position: absolute;
        right: 23px;
        top: -10px;
        width: 0;
        height: 0;
        border-bottom: 10px whitesmoke solid;
        border-left: 10px transparent solid;
        border-right: 10px transparent solid;
      }

      &:after {
        content: "";
        display: block;
        position: absolute;
        right: 23px;
        top: -9px;
        width: 0;
        height: 0;
        border-bottom: 10px white solid;
        border-left: 10px transparent solid;
        border-right: 10px transparent solid;
      }
    }
  }

</style>
